<template>
<div class="user-main">
    <el-card class="card">
        <div slot="header">
            <el-button type="primary" @click="addUser">新增用户</el-button>
        </div>
        <div>
            <el-table :data="user" style="width: 100%">
                <el-table-column  label="序号" width="60"  type="index" >
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    type="index"
                    label="序号" >
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="username"
                    label="用户名" >
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="nickname"
                    label="昵称" >
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    label="头像"  width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.icon" alt="sorry">
                    </template>
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    prop="phone"
                    label="电话" >
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="email"
                    label="邮箱" >
                </el-table-column>
                 <el-table-column
                    header-align="center"
                    align="center"
                    prop="sex"
                    label="性别" >
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                 
                    label="是否禁用" >
                    <template slot-scope="scope">
                    <el-switch v-model="scope.row.isDisabled" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>
                   <el-table-column
                    header-align="center"
                    align="center"
                    prop="city"
                    label="城市" >
                </el-table-column>
                   <el-table-column
                    header-align="center"
                    align="center"
                    prop="birthday"
                    label="生日" >
                </el-table-column>
                 <el-table-column fixed="right" label="操作" width="220" class="btns">
              
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle @click="goEditUser(scope.row.id)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="goDelUser(scope.row.id)"></el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
          <!-- 分页器 -->
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.start" :page-sizes="page.sizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
        </el-pagination>
    </el-card>

</div>
</template>

<script>
import {findMembersByPage} from '@/api/login/index'
export default {
    components: {

    },
    data() {
        return {
            user: [],
             // 分页器内容
            page: {
                limit: 1, //每一页数量
                sizes: [10, 20, 30, 40],
                totalCount: 40, //总页数
                start: 1 //当前页码
            },

        };
    },
    computed: {

    },
    created() {
        this.init()

    },
    mounted() {

    },
    methods: {
        init(){
            findMembersByPage(this.page.start,this.page.limit).then(res=>{
                console.log(res);
                if(res.success){
                    this.user=res.data.rows
                    this.page.totalCount=res.data.total

                }else{
                    this.$message.error('数据请求错误')
                }
            })
        },
          // 分页器
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page.limit = val
            this.init()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // 修改当前页
            this.page.start = val
            this.init()
        },
        addUser(){
            this.$router.push({name:'userListEdit'})

        },
        goEditUser(id){
            this.$router.push({name:'userListEdit',query:{id}})
        },
              goDelUser(id) {
            this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                .then(() => {
                    delAds(id).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.init();
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                        } else {
                            this.$message.error("删除失败！！！");
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },


    },
};
</script>

<style scoped lang="scss">
.card{
    margin: 30px;

    img{
        width: 120px;
        height: 120px;
    }
    .pagination{
        margin-top: 20px;
    }
}

</style>
